<template>
    <div id="login">
        <div class="navbar">
            <div class="icon" @click="close">
                <i class="iconfont">&#xe60e;</i>
            </div>
            <div class="title">登录</div>
        </div>
        <div class="logo"></div>
        <div class="form">
            <div class="form-item">
                <input type="text" name="username" placeholder="用户名/手机号" v-model="username" autocomplete="off">
            </div>
            <div class="form-item">
                <input :type="pswType==true?'password':'text'" class="password" name="password" placeholder="请输入密码" v-model="password"  @keyup="password=password.replace(/[\u4e00-\u9fa5]/g,'')" >
                <span class="showPwd pwdType" v-show="!pswType" @click="changePwd"></span>
                <span class="hidePwd pwdType" v-show="pswType" @click="changePwd"></span>
                <div class="btn">
                    <router-link to="/forgetPwd" tag="span">
                        忘记密码
                    </router-link>
                </div>
            </div>
            <div class="button">
                <button @click="loginSubmit">登 录</button>
                <div class="more">
                    <router-link tag="a" to='./phoneRegister'>快速注册</router-link>
                </div>
            </div>
        </div>
        <div class="other-login" v-if="false">
            <div class="title">
                <h3>其他登录方式</h3>
                <span class="line"></span>
            </div>
            <div class="other-info">
                <a href="https://open.weixin.qq.com/connect/qrconnect?appid=wx15649630bb9e351c&redirect_uri=http%3A%2F%2Fh5.17byh.com%2Flogin&response_type=code&scope=snsapi_login&state=STATE#wechat_redirect">
                    <span class="wexin icon"></span>
                </a>
                <a href="https://openauth.alipay.com/oauth2/publicAppAuthorize.htm?app_id=2017041406721505&scope=auth_user&redirect_uri=http%3A%2F%2Fh5.17byh.com%2Flogin&state=init22wfsfdf">
                    <span class="zfb icon"></span>
                </a>
            </div>
        </div>
    </div>
</template>

<script>
    import { Toast } from 'vant';
    import {login,zfbLogin,wxlogin} from 'api/login';
    import {mapMutations} from 'vuex'
    export default {
        name:'login',
        data(){
            return{
                pswType:true,
                username:'',
                password:'',
                auth_code:'',
                code:''
            }
        },
        created(){
            let url=window.location.href;
            if(url.indexOf('auth_code')>-1){
                this.auth_code=this.getUrlVar('auth_code');
                this.zfbAuthorization();
                return
            }else if(url.indexOf('code')>-1){
                this.code=this.getUrlVar('code');
                this.wxAuthorization();
            }
        },
        methods:{
            zfbAuthorization(){
                zfbLogin(this.auth_code).then(res=>{
                     if(res.data.error==0){
                        this.SET_LOGININFO(res.data.content);

                        Toast('登录成功');
                        let redirect = decodeURIComponent(this.$route.query.redirect || '/user');
                        this.$router.push({
                            path: redirect
                        });
                     }
                })
            },
            wxAuthorization(){
                wxlogin(this.code).then(res=>{
                     if(res.data.error==0){
                        this.SET_LOGININFO(res.data.content);
                        Toast('登录成功');
                        let redirect = decodeURIComponent(this.$route.query.redirect || '/user');
                        this.$router.push({
                            path: redirect
                        });
                     }
                })
            },
            getUrlVar(name){
                var vars = [], hash;
                var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
                for (var i = 0; i < hashes.length; i++) {
                    hash = hashes[i].split('=');
                    vars.push(hash[0]);
                    vars[hash[0]] = hash[1];
                }
                return vars[name];
            },
            changePwd(){
                this.pswType=!this.pswType;
            },
            close(){
               if (window.history.length <= 1) {
                    this.$router.push({path:'/'})
                } else {
                    this.$router.go(-1)
                }
            },
            loginSubmit(){
                if(this.username.length==0){
                     Toast('请输入用户名或手机号');
                     return;
                }else if(this.password.length==0){
                    Toast('请输入密码');
                     return;
                }else{
                    login(this.username,this.password).then(res=>{
                        if(res.data.error==0){
                            this.SET_LOGININFO(res.data.content);
                            this.SET_USERINFO(res.data.content);
                            Toast('登录成功');
                            let redirect = decodeURIComponent(this.$route.query.redirect || '/');
                            if(redirect.indexOf('gameDetail')!==-1){
                                 this.$router.go(-1);
                            }else{
                                 this.$router.replace({path:redirect})
                            }
                        }
                    })
                }
            },
             ...mapMutations(['SET_LOGININFO','SET_USERINFO'])

        },
        destroyed(){
            Toast.clear();
        }
    }
</script>

<style scoped lang="scss">
@import '~styles/variable';
@import '~styles/mixins';
 #login{
     background:#fff;
     z-index:1000;
     width: 7.5rem;
     margin:0 auto;
     overflow-y:scroll;
    .navbar{
        @include navbar(); 
        .icon{
            position:absolute;
            top:0;
            left:0;
            .iconfont{
                padding-left:0.3rem;
                font-size:0.5rem;
            }
        }
        span{
            position:absolute;
            top:0;
            right:0; 
            padding:0 0.3rem;
            font-size:$font-size-l;
        }
        .title{
            font-size:$font-size-l;
        }
    }
    .logo{
        width:4.06rem;
        height:2.02rem;
        margin:0.75rem auto auto;
        background-size:100% 100%;
        @include bg-image('../../assets/image/logo');
    }
     .form{
         margin-top:0.5rem;
         .form-item{
             position:relative;
             width:6.64rem;
             height:0.9rem;
             line-height:0.9rem;
             margin:0.3rem auto 0;
             border:1px solid #cbcbcb;
             border-radius:10px;
             &:last-child{
                 margin:0 auto;
             }
             input{
                width:100%;
                height:0.6rem;
                line-height:0.6rem;
                padding:0 0.25rem;
                border:none;
                box-sizing: border-box;
                font-size:$font-size-m;
            }
            .password{
                width:5.3rem;
                padding-right:0.9rem;
            }
             .pwdType{
                position: absolute;
                top: 50%;
                right: 1.7rem;
                margin-top:-0.1rem;
                background-repeat: no-repeat;
             }
             .showPwd{
                 width:0.37rem;
                 height:0.24rem;
                 right:1.72rem;
                 background-size: 0.37rem 0.24rem;
                @include bg-image('../../assets/image/icon_codezs');
             }
             .hidePwd{
                 width:0.44rem;
                 height:0.20rem;
                 margin-top:-0.05rem;
                 background-size: 0.44rem 0.20rem;
                 @include bg-image('../../assets/image/icon_code');
             }
             .btn{
                 height:0.5rem;
                 line-height:0.5rem;
                 position:absolute;
                 top:50%;
                 transform:translateY(-50%);
                 right:0;
                 width:1.5rem;
                 border-left:1px solid #cbcbcb;
                 span{
                     height:0.5rem;
                     line-height:0.5rem;
                     padding-left:0.2rem;
                     color:$color-focus;
                     font-size:$font-size-m;
                     border:none;
                 }
             }
         }
         .button{
             width:6.6rem;
             margin:0.7rem auto 0 auto;
            button{
               @include login-btn();
            }
             .more{
                 text-align:right;
                 margin-top:0.2rem;
                 padding-right:0.2rem;
                 font-size:$font-size-m;
                 a{
                     color:$color-focus;
                 }
             }
         }
     }
     .other-login{
        margin-top:1.2rem;
        text-align: center;
        .title{
            text-align: center;
            position:relative;
        }
         h3{
             display:inline-block;
             position:relative;
             padding:0 0.6rem;
             z-index:99;
             background:#fff;
             color:#aeaeae;
         }
         .line{
            position: absolute;
            left: 50%;
            width: 90%;
            top: 54%;
            transform: translate(-50%,-50%);
            &:after{
                    content: '';
                    position: absolute;
                    bottom: 0;
                    left: 0.4rem;
                    right:0.4rem;
                    display: block;
                    border-top: 1px solid $color-line;
                }
        }
        .other-info{
            margin-top:0.6rem;
            a{
                display:inline-block;
            }
            .icon{
                display:inline-block;
                width:0.78rem;
                height:0.78rem;
                background-size:0.78rem 0.78rem;
                margin:0 0.58rem;
            }
            .wexin{
                @include bg-image('../../assets/image/icon_wechat');
            }
            .zfb{
               @include bg-image('../../assets/image/icon_zfb');
            }
        }
     }
 }

</style>